<template>
	<div class="user-detail">
		<div class="name">
			<img src="@/assets/img/user.svg" alt="">
			<div>门店:</div>
			<div class="user-name" :title="userName" v-if="userName">{{ userName }}</div>
		</div>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane :label="active[0].name" :name="active[0].key">
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="时间" prop="dateTime"> </el-table-column>
					<el-table-column label="收支情况" prop="num"> </el-table-column>
					<el-table-column label="收支来源" prop="source"> </el-table-column>
				</el-table>
			</el-tab-pane>
			<el-tab-pane :label="active[1].name" :name="active[1].key">
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script>
export default {
	name: "UserDetail",
	data() {

		return {
			activeName: "0",
			userName: 'test',
			active: [
				{
					name: '收支记录',
					key: "0"
				},
				{
					name: '课表详情',
					key: "1"
				}
			],
			tableData: [
				{
					"id": 1,
					"dateTime": "2000-12-12 10:00",
					"num": "+10000",
					"source":"私教"
				},
				{
					"id": 2,
					"dateTime": "2000-12-12 11:00",
					"num": "-10000",
					"source":"储值"
				},
			],
		};
	},
	methods: {
		handleClick(tab, event) {
		},
		//更改处方的tab显示状态
		changeInfo(showKey) {
			this.infoShow = showKey;
		},
		//获取患者信息
		getUserDetail() {
		},
	},
	mounted() {
		this.getUserDetail()
	},
};
</script>

<style lang="scss" scoped>
.user-detail {
	position: relative;
	padding: 12px 16px;
	background-color: #f5f5f5;

	.name {
		width: 212px;
		height: 60px;
		display: flex;
		align-items: center;
		font-size: 20px;
		color: rgba(9, 32, 32, 0.6);
		position: absolute;
		top: 12px;
		left: 16px;
		z-index: 6;

		img {
			width: 24px;
			margin: 0 12px 0 20px;
		}
	}

	.user-name {
		width: 110px;
		line-height: 60px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		z-index: 6;
	}

	>.el-tabs::v-deep {
		.el-tabs__header {
			margin-bottom: 20px;
			background-color: #fff;

			.el-tabs__active-bar {
				width: 80px !important;
			}
		}

		.el-tabs__nav-wrap::after {
			display: none;
		}

		.el-tabs__nav {
			margin-left: 212px;
		}

		.el-tabs__item {
			width: 184px;
			height: 60px;
			line-height: 60px;
			padding: 0 52px;
			font-size: 20px;
			color: rgba(9, 32, 32, 0.6);
		}

		.el-tabs__item:hover {
			color: #24bbd3;
		}

		.el-tabs__item.is-active {
			color: #24bbd3;
			font-weight: 700;
			box-shadow: none;
		}

		.el-tabs__content {
			height: calc(100vh - 203px);
			overflow-y: auto;

			.el-tab-pane {
				height: 100%;
			}
		}
	}
}
</style>